<template>
    <div style="display: flex; justify-content: space-evenly;">
        <el-form class="form" ref="formRef" :module="formCheck">
            <el-form-item label="工号">
                <el-input v-model="formCheck.staff_no" disabled />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="formCheck.staff_name" disabled />
            </el-form-item>
            <el-form-item label="职位">
                <el-input v-model="formCheck.position" disabled />
            </el-form-item>
            <el-form-item label="部门">
                <el-input v-model="formCheck.department_name" disabled />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="formCheck.remarks" type="textarea" />
            </el-form-item>
            <el-form-item class="btn">
                <el-button class="sub" circle type="primary" @click="onSubmit">打卡</el-button>
            </el-form-item>
        </el-form>

        <div class="scrollbar">
            <h4>历史打卡列表</h4>
            <el-table style="width: 300px;" max-height="300" :data="tableList" show-overflow-tooltip
                @row-dblclick="handleOpen">
                <el-table-column prop="time" label="打卡时间" width="200" :formatter="toDate">
                </el-table-column>
                <el-table-column prop="type" label="打卡类型">
                </el-table-column>
            </el-table>
        </div>
        <!-- 弹窗-详情 -->
        <el-dialog class="dialog" v-model="dialogVisible" title="详情" width="360" :close="handleClose">
            <el-form class="dialog-form" :model="dialogForm" ref="dialogFormRef">
                <el-form-item label-width="80px" label="打卡时间">
                    <el-input v-model="dialogForm.time" clearable />
                </el-form-item>
                <el-form-item label-width="80px" label="打卡类型">
                    <el-input v-model="dialogForm.type" clearable />
                </el-form-item>
                <el-form-item label-width="80px" label="备注">
                    <el-input style="width: 250px;" v-model="dialogForm.remarks" type="textarea" clearable />
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { useUserStore } from '@/store/user';
import { timeProcessing, toTime } from '@/utils/date';
import { addAttendance } from '@/api/employee';
import { queryAttendance } from '@/api/employee';

const userStore = useUserStore();
const info = computed(() => userStore.userInfo);

// 打卡表单
const formRef = ref(null)
const formCheck = reactive({
    staff_no: info.value.staff_no,
    staff_name: info.value.staff_name,
    position: info.value.position,
    department_name: info.value.department_name,
    remarks: ''
})

// 打卡列表
const tableList = ref([])

// 详情
const dialogVisible = ref(false);
const dialogForm = reactive({});
const dialogFormRef = ref(null);

// 打卡提交
const onSubmit = () => {
    ElMessageBox.confirm('确认提交打卡吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            let data = {
                ...formCheck,
                type: toTime(new Date()) < 12 ? '签到' : '签退',
                time: timeProcessing(new Date())
            }
            const res = await addAttendance(data);
            if (res.code == 0) {
                ElMessage.success('打卡成功！');
            } else {
                ElMessage.error('打卡失败！');
            }
            queryCard();
        } catch {
            console.log("请求失败");
        }
    }).catch(() => {
        console.log('取消');
    })

}

const queryCard = async () => {
    try {
        const data = {
            staffNo: info.value.staff_no,
            staffName: info.value.staff_name
        }
        const res = await queryAttendance(data);
        tableList.value = res.data.list;
    } catch {
        console.log("请求失败");
    }
}

const toDate = (row, value, cellValue) => {
    return timeProcessing(cellValue);
}

const handleOpen = (row) => {
    dialogVisible.value = true;
    dialogForm.time = timeProcessing(row.time);
    dialogForm.type = row.type;
    dialogForm.remarks = row.remarks;
}

const handleClose = () => {
    dialogVisible.value = false;
    if (dialogFormRef.value) dialogFormRef.value.resetFields();
}

onMounted(() => {
    if (Object.keys(info.value).length > 0) {
        formCheck.staff_no = info.value.staff_no;
        formCheck.staff_name = info.value.staff_name;
        formCheck.position = info.value.position;
        formCheck.department_name = info.value.department_name;
        formCheck.remarks = '';
    } else {
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        formCheck.staff_no = userInfo.staff_no;
        formCheck.staff_name = userInfo.staff_name;
        formCheck.position = userInfo.position;
        formCheck.department_name = userInfo.department_name;
        formCheck.remarks = '';
        info.value.staff_no = userInfo.staff_no;
        info.value.staff_name = userInfo.staff_name;
    }
    queryCard();
})
</script>

<style lang="scss" scoped>
.form {
    width: 300px;
    margin-top: 60px;
}

.btn {
    :deep(.el-form-item__content) {
        justify-content: center !important;
    }

    .sub {
        width: 100px;
        height: 100px;
        font-size: 24px;
    }
}

.scrollbar {
    box-sizing: border-box;
    padding-left: 100px;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}
</style>